<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-06-01 11:11:05
 * @LastEditTime : 2024-01-26 14:12:33
-->
<script lang="ts" setup name="IkSplitPan">
import { CaretLeft } from '@element-plus/icons-vue'
import { Pane, Splitpanes } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import type { PropType } from 'vue'

const props = defineProps({
  // 垂直方向
  horizontal: {
    type: Boolean,
    default: false
  },
  // 左侧
  leftSize: {
    type: Array as PropType<Array<[Number, Number]>>,
    default: () => [0, 100],
    validator: (val: Array<[Number, Number]>) => {
      return val.length === 2 && val.every(v => typeof v === 'number')
    }
  },
  // 左侧初始大小
  size: {
    type: Number,
    default: 50
  },
  direction: {
    type: String as PropType<'left' | 'right'>,
    default: 'left'
  }
})

const panStatu = ref(true)
const handTogglePanel = () => {
  panStatu.value = !panStatu.value
}
const paneSize = ref(props.size)

const isLeftDir = computed(() => props.direction === 'left')
</script>

<template>
  <Splitpanes
    dbl-click-splitter
    :class="{ hiddle: panStatu, reverse: !isLeftDir }"
    @resize="paneSize = $event[0].size"
  >
    <Pane
      v-show="panStatu || !isLeftDir"
      :size="isLeftDir ? size : (panStatu ? 100 - paneSize : 100)"
      :class="{ 'first-panel': isLeftDir, 'flex1': !isLeftDir }"
    >
      <span class="toggle-pan" @click="handTogglePanel">
        <el-icon><CaretLeft /></el-icon>
      </span>
      <slot name="left"></slot>
    </Pane>
    <Pane v-show="panStatu || isLeftDir" :size="isLeftDir ? (panStatu ? 100 - paneSize : 100) : size" :class="{ 'first-panel': !isLeftDir, 'flex1': isLeftDir }">
      <span v-if="!panStatu" class="toggle-pan-right" @click="handTogglePanel">
        <el-icon><CaretLeft /></el-icon>
      </span>
      <slot name="right"></slot>
    </Pane>
  </Splitpanes>
</template>

<style lang="scss" scoped>
// .spinkit-transition-leave-active,
// .spinkit-transition-enter-active {
//   transition: all 0.3s;
// }

// .spinkit-transition-enter,
// .spinkit-transition-leave-to {
//   overflow: hidden;

//   .first-panel{
//     min-width: 0;
//   }
// }

.splitpanes{
  position: relative;

  &.hiddle{
    :deep(.splitpanes__splitter){
      background-color: var(--ik-main-bg);
      width: 0;
      padding: 0 2px;
    }

    :deep(.splitpanes__pane){
      overflow: visible;
    }
  }

  &.reverse{
    .toggle-pan{
      transform: rotateY(0);
      right: -3px;
    }

    &.hiddle .toggle-pan{
      transform: rotateY(180deg);
      right: -3px;
    }
  }

  .toggle-pan,.toggle-pan-right{
      border-radius: 6px;
      position: absolute;
      display: flex;
      height: 44px;
      width: 12px;
      right: -6px;
      top: calc((var(--ik-card-header-height) - 44px) / 2);
      z-index: 5;
      border: 1px solid var(--el-border-color);
      box-shadow: var(--el-box-shadow);
      cursor: pointer;
      font-size: 12px;
      align-items: center;
      justify-content: center;
      transition: all .25s;
      background-color: var(--ik-card-bg);
      color: var(--ik-main-icon-deep-color);

      &:hover {
         background-color: var(--el-color-primary);
         color: var(--el-fill-color);
      }
  }

  .toggle-pan-right{
    left: 0;
    background-color: var(--el-color-primary);
    color: var(--el-fill-color);
    border-radius: 0 8px 8px 0;

    &:hover{
      opacity: 0.9;
    }

     & > i{
        transform: rotateY(180deg);
     }
  }

  .first-panel{
    min-width: 290px;
    overflow: visible;
    position: relative;
    height: 100%;

    & > div{
      height: 100%;
    }
  }

  .flex1{
    flex: 1;
    width: auto !important;
    overflow-x: hidden !important;
  }

  :deep(.splitpanes__splitter){
    width: 1px;
    padding: 0 1px;
    border-left: 1px solid var(--ik-split-border-color);
  }

  :deep(.splitpanes__pane){
    position: relative;
    display: flex;
    flex-direction: column;
    transition: none;
  }
}
</style>
